<template>
  <div class="m-page">
    <van-nav-bar
      class="m-page__bar"
      title="我的订单"
      left-arrow
      @click-left="onClickLeft"
    />
    <van-tabs v-model="active">
      <van-tab title="待付款">
        <div v-for="(item, index) of createdList" :key="index">
          <van-panel
            class="g-mb--10"
            :title="`已下单：成件-${item.count}套`"
            status="等待付款"
          >
            <div class="g-c--gray g-fs--12 g-p--10 g-pl--15">
              <p class="g-mb--5">订单编号：{{ item.order_sn }}</p>
              <p class="g-mb--5">收件人：{{ item.receiver_name }}</p>
              <p class="g-mb--5">收件人地址：{{ item.receiver_address }}</p>
              <p>收件人手机：{{ item.receiver_mobile }}</p>
            </div>
            <div
              class="g-d--flex justify-content-between align-items-center"
              slot="footer"
            >
              <p class="g-c--red g-fs--14">需支付：{{ item.amount }}元</p>
              <van-button
                @click="showPayDialog(index)"
                size="small"
                type="danger"
                >我要支付</van-button
              >
            </div>
          </van-panel>
        </div>
      </van-tab>
      <van-tab title="待发货">
        <div v-for="(item, index) of paidList" :key="index">
          <van-panel
            class="g-mb--10"
            :title="`已下单：成件-${item.count}套`"
            status="待发货"
          >
            <div class="g-c--gray g-fs--12 g-p--10 g-pl--15">
              <p class="g-mb--5">订单编号：{{ item.order_sn }}</p>
              <p class="g-mb--5">收件人：{{ item.receiver_name }}</p>
              <p class="g-mb--5">收件人地址：{{ item.receiver_address }}</p>
              <p>收件人手机：{{ item.receiver_mobile }}</p>
            </div>
            <div slot="footer">
              <p class="g-c--red g-fs--14 g-mb--5">
                已支付：{{ item.amount }}元
              </p>
              <p class="g-c--gray g-fs--12 g-mb--5">
                我的付款方式：{{ item.payment }}
              </p>
              <p class="g-c--gray g-fs--12">
                我的付款账号：{{ item.pay_number }}
              </p>
            </div>
          </van-panel>
        </div>
      </van-tab>
      <van-tab title="已发货">
        <div v-for="(item, index) of deliveredList" :key="index">
          <van-panel
            class="g-mb--10"
            :title="`已下单：成件-${item.count}套`"
            status="已发货"
          >
            <div class="g-c--gray g-fs--12 g-p--10 g-pl--15">
              <p class="g-mb--5">订单编号：{{ item.order_sn }}</p>
              <p class="g-mb--5">收件人：{{ item.receiver_name }}</p>
              <p class="g-mb--5">收件人地址：{{ item.receiver_address }}</p>
              <p>收件人手机：{{ item.receiver_mobile }}</p>
            </div>
            <div slot="footer">
              <p class="g-c--red g-fs--14 g-mb--5">
                已支付：{{ item.amount }}元
              </p>
              <p class="g-c--gray g-fs--12 g-mb--5">
                我的付款方式：{{ item.payment }}
              </p>
              <p class="g-c--gray g-fs--12">
                我的付款账号：{{ item.pay_number }}
              </p>
            </div>
          </van-panel>
        </div>
      </van-tab>
      <van-tab title="已签收">
        <div v-for="(item, index) of receivedList" :key="index">
          <van-panel
            class="g-mb--10"
            :title="`已下单：成件-${item.count}套`"
            status="已签收"
          >
            <div class="g-c--gray g-fs--12 g-p--10 g-pl--15">
              <p class="g-mb--5">订单编号：{{ item.order_sn }}</p>
              <p class="g-mb--5">收件人：{{ item.receiver_name }}</p>
              <p class="g-mb--5">收件人地址：{{ item.receiver_address }}</p>
              <p>收件人手机：{{ item.receiver_mobile }}</p>
            </div>
            <div slot="footer">
              <p class="g-c--red g-fs--14 g-mb--5">
                已支付：{{ item.amount }}元
              </p>
              <p class="g-c--gray g-fs--12 g-mb--5">
                我的付款方式：{{ item.payment }}
              </p>
              <p class="g-c--gray g-fs--12">
                我的付款账号：{{ item.pay_number }}
              </p>
            </div>
          </van-panel>
        </div>
      </van-tab>
    </van-tabs>
    <!-- 弹窗 start -->
    <van-dialog
      v-model="show"
      confirm-button-text="确认付款"
      show-cancel-button
      :before-close="beforeClose"
    >
      <h2 class="m-dialog-title">我要付款</h2>
      <div class="m-dialog-details m-dialog-details--header">
        <p class="g-fs--14">
          您可以通过微信、支付宝或银行卡往一下账户打款：<b class="g-c--red">{{
            this_amount
          }}</b
          >元
        </p>
        <p class="g-fs--14 g-fw--600">收款人：徐晓</p>
        <p class="g-fs--14 g-fw--600">收款账号：562555458789744354（农行）</p>
      </div>
      <van-cell-group>
        <van-cell
          @click="showPicker"
          title-class="g-c--gray"
          is-link
          arrow-direction="down"
        >
          <template slot="title">
            <span>{{ pay_type_text }}</span>
          </template>
        </van-cell>
        <van-field
          v-model="pay_number"
          type="text"
          placeholder="请输入您的支付账户"
        />
      </van-cell-group>
    </van-dialog>
    <!-- 弹窗 end -->
    <!-- 支付方式 start -->
    <van-popup v-model="show_picker" position="bottom">
      <van-picker
        show-toolbar
        title="支付方式"
        :columns="columns"
        @cancel="onCancel"
        @confirm="onConfirm"
      />
    </van-popup>
    <!-- 支付方式 end -->
  </div>
</template>

<script>
import {
  NavBar,
  Cell,
  CellGroup,
  Panel,
  Field,
  Icon,
  Button,
  Tab,
  Tabs,
  Picker,
  Popup
} from "vant";
import { goodsModel } from "@/api";
import Tool from "@/lib/tool";
import Util from "@/lib/util";
const tool = new Tool();
const util = new Util();

export default {
  name: "my_orders",
  data() {
    return {
      active: 0,
      show: false,
      show_picker: false,
      pay_type: "",
      pay_type_text: "请选择您的支付方式",
      bank_card_id: "",
      columns: ["支付宝", "微信", "银行"],
      createdList: [],
      paidList: [],
      deliveredList: [],
      receivedList: [],
      payment: "",
      pay_number: "",
      order_sn: "",
      this_amount: ""
    };
  },
  components: {
    "van-nav-bar": NavBar,
    "van-cell": Cell,
    "van-cell-group": CellGroup,
    "van-panel": Panel,
    "van-field": Field,
    "van-icon": Icon,
    "van-button": Button,
    "van-tab": Tab,
    "van-tabs": Tabs,
    "van-picker": Picker,
    "van-popup": Popup
  },
  created() {
    this.active = this.$route.params.type;
    this.getMyOrderList();
  },
  methods: {
    /* 订单支付 */
    pay(formData) {
      goodsModel
        ._pay(formData)
        .then(res => {
          util._done({ res });
        })
        .then(() => {
          this.getMyOrderList();
        });
    },
    /* 获取订单信息 */
    getMyOrderList() {
      const getcreatedList = goodsModel._getMyOrderList({
        pagesize: 9999,
        status: "created"
      });
      const getpaidList = goodsModel._getMyOrderList({
        pagesize: 9999,
        status: "paid"
      });
      const getdeliveredList = goodsModel._getMyOrderList({
        pagesize: 9999,
        status: "delivered"
      });
      const getreceivedList = goodsModel._getMyOrderList({
        pagesize: 9999,
        status: "received"
      });
      Promise.all([
        getcreatedList,
        getpaidList,
        getdeliveredList,
        getreceivedList
      ]).then(res => {
        this.createdList = res[0].orderList;
        this.paidList = res[1].orderList;
        this.deliveredList = res[2].orderList;
        this.receivedList = res[3].orderList;
      });
    },
    onClickLeft() {
      this.$router.go(-1);
    },
    showPayDialog(index) {
      console.log(this.createdList[index]);
      this.order_sn = this.createdList[index].order_sn;
      this.this_amount = this.createdList[index].amount;
      this.show = true;
    },
    showPicker() {
      this.show_picker = true;
    },
    beforeClose(action, done) {
      const formData = {
        order_sn: this.order_sn,
        payment: this.payment,
        pay_number: this.pay_number
      };
      console.log(formData);
      if (action === "confirm") {
        if (!tool.formDataCheck(formData)) {
          this.$toast({
            type: "fail",
            message: "必填项为空！",
            duration: 1500
          });
          done(false);
          return;
        }
        this.pay(formData);
      }
      done();
      this.pay_type = "";
      this.pay_type_text = "请选择您的支付方式";
      this.payment = "";
      this.pay_number = "";
      this.order_sn = "";
    },
    onConfirm(value, index) {
      this.show_picker = false;
      this.pay_type = index;
      this.pay_type_text = value;
      this.payment = value;
      // this.$toast(`当前值：${value}, 当前索引：${index}`);
    },
    onCancel() {
      this.show_picker = false;
      this.pay_type = "";
      this.pay_type_text = "请选择您的支付方式";
      this.payment = "";
      // this.$toast("取消");
    }
  }
};
</script>

<style lang="scss"></style>
